<template>
  <div class="app-container">
    <!--查询条件开始-->
    <el-row :gutter="10" style="margin-bottom: 6px">
      <el-col :span="24">
        <el-card>
          <el-form ref="queryForm" :inline="true" label-width="68px">
            <el-form-item style="float:right">
              <el-button type="primary" icon="el-icon-plus" size="small" @click="preWeek">上一周</el-button>
              <el-button type="success" icon="el-icon-edit" size="small" @click="currentWeek">当前周</el-button>
              <el-button type="primary" icon="el-icon-plus" size="small" @click="nextWeek">下一周</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <!--查询条件结束-->
    <!--时间范围开始-->
    <el-row :gutter="12" style="margin-bottom: 5px">
      <el-col :span="24">
        <el-card>
          <div style="text-align: center">
            <span>{{schedulingData.startTimeThisWeek}}~{{schedulingData.endTimeThisWeek}}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--时间范围结束-->

    <!--排班表格开始-->
    <el-table v-loading="loading" border :data="tableData" :span-method="mergingCell">
      <!--formatter用于格式化，翻译函数，将里面的值根据id取对应的值，放入表格中-->
      <el-table-column prop="userId" label="医生" align="center" :formatter="userFormatter"></el-table-column>
      <el-table-column prop="deptId" label="科室" align="center" :formatter="deptFormatter"></el-table-column>
      <el-table-column prop="subsectionType" label="时间/日期" align="center" :formatter="subsectionTypeFormatter"></el-table-column>
      <el-table-column prop="schedulingType[0]" :label="labelNames[0]" align="center" :formatter="MondayschedulingTypeFormatter"></el-table-column>
      <el-table-column prop="schedulingType[1]" :label="labelNames[1]" align="center" :formatter="TuesdayschedulingTypeFormatter"></el-table-column>
      <el-table-column prop="schedulingType[2]" :label="labelNames[2]" align="center" :formatter="WensdayschedulingTypeFormatter"></el-table-column>
      <el-table-column prop="schedulingType[3]" :label="labelNames[3]" align="center" :formatter="ThusdayschedulingTypeFormatter"></el-table-column>
      <el-table-column prop="schedulingType[4]" :label="labelNames[4]" align="center" :formatter="FridayschedulingTypeFormatter"></el-table-column>
      <el-table-column prop="schedulingType[5]" :label="labelNames[5]" align="center" :formatter="SaturdayschedulingTypeFormatter"></el-table-column>
      <el-table-column prop="schedulingType[6]" :label="labelNames[6]" align="center" :formatter="SundayschedulingTypeFormatter"></el-table-column>
    </el-table>
    <!--排班表格结束-->



    <el-dialog >

    </el-dialog>




  </div>
</template>

<script>
// 导入查询需要排版的医生的api
import {queryMyScheduling, queryUsersNeedScheduling, saveSchedulingNew} from "../../../api/his/sceduling";
// 导入排班的数据api
import {queryScheduling} from "../../../api/his/sceduling";
// 导入保存排班数据的api
import {saveScheduling} from "../../../api/his/sceduling";
// 导入查询科室的pai
import {queryDept} from "../../../api/his/sceduling";
import Cookies from "_js-cookie@2.2.1@js-cookie";


export default {
  name: "Schedule",
  data() {
    return {
      // 新增日期标签
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },

      // 新增表单参数
      addForm: {
        userId: undefined,
        deptId: undefined,
        subsectionType: undefined,
        schedulingType: undefined,
        schedulingDay: undefined
      },
      // 新增排班按钮遮罩层开启
      addOpen:false,
      // 清空弹框数据
      // cleared:'',
      // // dialog中查询的参数
      // daiQueyParams:{
      //   schedulingType:undefined
      // },
      // 弹出层中的表格数据
      dialogData:[],
      // 弹出框的名称
      title:'',
      // 弹出层的开启
      open:false,
      // 遮罩层
      loading:false,
      // 科室数据
      deptOptions:[],
      // 用户数据
      userOptions:[],
      // 排班开始事件
      schedulingData:{
        // startTimeThisWeek:"2021-9-13(周一)",
        // endTimeThisWeek:"2021-9-19(周日)"
        startTimeThisWeek:undefined,
        endTimeThisWeek:undefined
      },
      // 排班时段字典
      subsectionTypeOptions:[],
      // 排班类型字典
      schedulingTypeOptions:[],
      // 医生和科室信息数据，该数据假设已经按着部门信息进行排序
      tableData: [
        // { userId: 2, deptId: 101, subsectionType: '1', schedulingType: ['1', '1', '1', '1', '1', '1', '1'] },
        // { userId: 2, deptId: 101, subsectionType: '2', schedulingType: ['1', '1', '1', '1', '1', '1', '1'] },
        // { userId: 2, deptId: 101, subsectionType: '3', schedulingType: ['1', '1', '1', '2', '1', '1', '1'] },
        // { userId: 3, deptId: 102, subsectionType: '1', schedulingType: ['1', '1', '1', '2', '1', '1', '1'] },
        // { userId: 3, deptId: 102, subsectionType: '2', schedulingType: ['1', '1', '1', '2', '1', '1', '1'] },
        // { userId: 3, deptId: 102, subsectionType: '3', schedulingType: ['1', '1', '1', '1', '1', '1', '1'] },
        // { userId: 4, deptId: 103, subsectionType: '1', schedulingType: ['1', '1', '1', '1', '1', '1', '1'] },
        // { userId: 4, deptId: 103, subsectionType: '2', schedulingType: ['1', '1', '1', '1', '1', '1', '1'] },
        // { userId: 4, deptId: 103, subsectionType: '3', schedulingType: ['1', '1', '1', '1', '1', '1', '1'] },
        // { userId: 5, deptId: 104, subsectionType: '1', schedulingType: ['1', '1', '1', '1', '1', '1', '1'] },
        // { userId: 5, deptId: 104, subsectionType: '2', schedulingType: ['1', '1', '1', '1', '1', '1', '1'] },
        // { userId: 5, deptId: 104, subsectionType: '3', schedulingType: ['', '1', '1', '1', '1', '1', '1'] },
        // { userId: 6, deptId: 104, subsectionType: '3', schedulingType: ['', '1', '1', '1', '1', '1', '1'] },
      ],
      labelNames: [
        '2020-07-27(周一)',
        '2020-07-28(周二)',
        '2020-07-29(周三)',
        '2020-07-30(周四)',
        '2020-07-31(周五)',
        '2020-08-01(周六)',
        '2020-08-02(周日)'
      ],
      // 查询数据
      queryParams:{
        queryDate:undefined
      }
    };
  },
  //  生命周期函数，在页面加载的时候触发，查询数据
  created() {
    // 查询科室
    queryDept().then(res=>{
      this.deptOptions = res.data
    })
    // 要排班的医生
    queryUsersNeedScheduling().then(res=>{
      // console.log(res);
      this.userOptions = res.data
    })
    // 查询排班类型
    this.getDicts("his_scheduling_type").then(response => {
      // console.log(response.data);
      this.schedulingTypeOptions = response.data;

    });
    // 查询排班时段
    this.getDicts("his_subsection_type").then(response => {
      this.subsectionTypeOptions = response.data;
    });

    // 查询排班数据，数据应该填充schedulingData，tableData，labelNames
    this.listSchedulingData();

  },

  methods: {
    // 定义查询排班数据函数
    listSchedulingData(){
      this.loading=true
      // 中间调用API
      // this.queryParams.userId;
      queryMyScheduling(this.queryParams).then(res=>{
          console.log(res.data.labelNames);
          // this.tableData = []
          this.tableData = res.data.tableData
          // this.schedulingData = []
          this.schedulingData = res.data.schedulingData
          // this.labelNames = []
          this.labelNames = res.data.labelNames
          this.loading = false
        }
      )
      this.loading=false
    },
    // 上一周函数
    preWeek(){
      this.queryParams.queryDate = this.schedulingData.startTimeThisWeek
      this.listSchedulingData()
    },
    // 当前周
    currentWeek(){
      this.queryParams.queryDate = undefined
      this.listSchedulingData()

    },
    // 下一周
    nextWeek(){
      this.queryParams.queryDate = this.schedulingData.endTimeThisWeek
      this.listSchedulingData()
    },
    // 翻译医生
    userFormatter(row){
      var name = ""
      this.userOptions.filter(item=>{
        if(row.userId===item.userId){
          name = item.userName
        }
      })
      return name
    },
    //翻译科室
    deptFormatter(row){
      let name = ""
      this.deptOptions.filter(item=>{
        if(row.deptId===item.deptId){
          name = item.deptName
        }
      })
      return name
    },
    //翻译排班时段
    subsectionTypeFormatter(row){
      return this.selectDictLabel(this.subsectionTypeOptions, row.subsectionType);
    },
    // 查询星期一排班类型
    MondayschedulingTypeFormatter(row){
      return this.selectDictLabel(this.schedulingTypeOptions, row.schedulingType[0]);
    },// 查询星期二排班类型
    TuesdayschedulingTypeFormatter(row){
      return this.selectDictLabel(this.schedulingTypeOptions, row.schedulingType[1]);
    },// 查询星期三排班类型
    WensdayschedulingTypeFormatter(row){
      return this.selectDictLabel(this.schedulingTypeOptions, row.schedulingType[2]);
    },// 查询星期四排班类型
    ThusdayschedulingTypeFormatter(row){
      return this.selectDictLabel(this.schedulingTypeOptions, row.schedulingType[3]);
    },// 查询星期五排班类型
    FridayschedulingTypeFormatter(row){
      return this.selectDictLabel(this.schedulingTypeOptions, row.schedulingType[4]);
    },// 查询星期六排班类型
    SaturdayschedulingTypeFormatter(row){
      return this.selectDictLabel(this.schedulingTypeOptions, row.schedulingType[5]);
    },// 查询星期日排班类型
    SundayschedulingTypeFormatter(row){
      return this.selectDictLabel(this.schedulingTypeOptions, row.schedulingType[6]);
    },
    // 合并单元格函数
    mergingCell({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 3 === 0) {
          return {
            rowspan: 3,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }

      if (columnIndex === 1) {
        if (rowIndex % 3 === 0) {
          return {
            rowspan: 3,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }

      if (columnIndex === 10) {
        if (rowIndex % 3 === 0) {
          return {
            rowspan: 3,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }

    },
  }
};
</script>
